<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>原生vue</title>
</head>
<body>
<div id="app">
    <div>{{message+1}}</div>
    <p> {{ok? 'yes':'no'}}</p>
    <span v-bind:title="tips">鼠标悬停几秒，查看信息</span><br>
    <span v-if="seen">你现在看到我了！</span>
    <ol>
        <li v-for="item in todos">
            {{item.text}}-是-{{item.author}}-写的
        </li>
    </ol>
    <div>
        <p>{{message}}</p>
        <button v-on:click="reverseMessage">逆转消息</button>
    </div>
    <div>
        <p>{{message}}</p>
        <input v-model="message"/>
    </div>
    <div>
        <ol>
            <todo-item
                    v-for="item in groceryList"
                    v-bind:todo="item"
                    v-bind:key="item.id"></todo-item>
        </ol>
    </div>
    <div>
        <p>{{foo}}</p>
        <button v-on:click="foo='bazz'">点击改变</button>
        <p>看值变不变：{{rowHtml}}</p>
        <p>v-html标签操作一把：<span v-html="rowHtml"></span></p>
        <button v-bind:disabled="isDisabled">能看见我了</button>
    </div>
    <div>
        <p style="color: blue">以下v-on:指令简写为@</p>
        <button @click="myfunction">点击我</button>
    </div>
    <div>
        <p style="color: blue">以下是计算属性</p>
        <p>原始数据:{{message}}</p>
        <p>利用计算属性得到字符串反转{{myReverse}}</p>
    </div>
    <div>
        <p style="color: blue;">以下v-for遍历对象</p>
        <p>原始对象{{myObject}}</p>
        <li v-for="(aa ,bb,cc) in  myObject"> {{aa}}-{{bb}}-{{cc}}</li>
    </div>
    <div>
        <p style="color: blue;">全局组件的使用</p>
        <button-counter></button-counter>
    </div>
    <div>
        <p style="color: blue;">局布组件的使用</p>
        <componena v-for="item in groceryList"
                   v-bind:item="item"
        ></componena>
        <compnetB></compnetB>
    </div>

</div>

</body>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">

    // 自定义全局组件--todo-item
    Vue.component('todo-item', {
        props: ['todo'],
        template: '<li>{{todo.text}}</li>'
    })


    // 自定义全局组件--button-counter
    Vue.component('button-counter', {
        // 所有组件都是一个vue实例，都有data属性，模板，。，。。props
        data() {
            return {
                count: 0
            }
        },
        template: '<button @click="clickHandler"> 你点击了我{{count}}次</button>',
        methods: {
            clickHandler() {
                this.count++
            }
        }
    })

    // 定义对象，作为根实例的数据
    var mydata = {
        message: "hello world!",
        tips: "这是个提示啊，加载于" + new Date().toLocaleDateString(),
        seen: true,
        todos: [{text: "学习java", author: "高斯林"},
            {text: "学习golang", author: "高斯林"},
            {text: "学习python", author: "高斯林"},
            {text: "学习vue", author: "高斯林"}],
        groceryList: [{id: '一', text: "吃饭"},
            {id: '二', text: "睡觉"},
            {id: '三', text: "玩LOL"},
            {id: '四', text: "玩绝地求生"}],
        foo: "bar",
        rowHtml: "<span style=\"color: red\">This should be red.</span>",
        isDisabled: true,
        ok: true,
        myObject: {name: "袁金忠", age: "25", sex: "男"}
    }

    // 定义对象作为局部组件
    var compnetA = {
        template: '<div>' +
        '<li>{{item.text}}</li>' +
        '<span style="color: red">此处父子组件属性交互</span>' +
        '</div>',
        props: ['item']
    }
    var compnetB = {template: '<div><li>youli</li><span style="color: darkorange">此处无属性交互</span></div>'}


    var app = new Vue({
        // 实例挂载点
        el: "#app",
        data: mydata,
        //生命周期钩子函数
        created: function () {
            console.log("message is:" + this.message)
        },
        // 根实例方法
        methods: {
            reverseMessage: function () {
                this.message = this.message.split('').reverse().join('')
            },
            myfunction: function () {
                alert("这是v-on:的简写 @")
            },
            clickHandler() {
                this.count = count++
            }
        },
        // 观察data对象里的属性：message的变化
        watch: {
            'message': function (newValue, oldValue) {
                console.log("旧值为:" + oldValue)
            }
        },
        // 计算属性
        computed: {
            myReverse: function () {
                return this.message.split('').reverse().join('')
            }
        },

        // 局部组件
        components: {
            componena: compnetA,
            compnetb: compnetB
        }
    })

    // 观察data对象里的属性：message的变化
    app.$watch('message', function (newvalue, oldvalue) {
        console.log("新值为" + newvalue)
    })

</script>
</html>